// $(function () {
//     // 实现历史缓存
//     //     1.准备一个存储关键字的数组
//     //     2.当用户点击所搜按钮的时候 将用户输入的关键字追加到数组中
//     //     3.将数组储存在本地储存中
//     //     4.在页面一上来的时候 判断本地储存中是否有已经储存的关键字
//     //     5.将数据和HTML拼接 将数据展示在页面中

//      //不点击
//       var  arr= [];
//      // 获取本地缓存
//      if (localStorage.getItem('key')) {
//          arr = JSON.parse(localStorage.getItem('key'));
//          console.log(localStorage.getItem('key'))
//          var data = template('history-box',{aa:arr});
//          console.log(data);
//          $('historySearch').html(data);
//       }


//     // 点击
//     $("#search-btn").on('tap', function() {
//         //用户输入的关键字
//         var val = $(this).siblings('input').val();
//         if (!val) {
//             alert("请输入");
//             return;
//         }
//         console.log(val)
     
//         arr.push(val);   
//         console.log(varArr)
//         //一次只能储存一个值所以追加到数组
//         //存储的类型为字符串
//         localStorage.setItem('key', JSON.stringify(arr));
//          location.href = "search-result.html?val=" + val;
//     })
     
//     //清空历史
//     //添加点击事件

//     $('#historySearch').on('click',function () {
//         $("#historySearch").html('');
//         localStorage.clear();
//     })
//     //清除页面数据和本地缓存数据
// })

//localStorage.setItem()读取文件   JSON.stringify()把数组转换为字符窜
//localStorage.getItem()写入文件   JSON.parse()把字符窜转换为数组


$(function () {
    //点击
    $('#search-btn').on('click',function () {
        //用户输入关键字
      var val = $(this).siblings().val() //获取兄弟元素的value值
         console.log(val);
        //跳转页面 并且要将用户输入的关键字带到 这个页面中去
        if(val){
                 //将用户输入的关键字储存到数组中去 
                keyArr.push(val);
            console.log('已输入');
                
                 // 此时数据是数组但是localstorage中存储的字符串
            localStorage.setItem("historyTpl", JSON.stringify(keyArr.push(val)));
            console.log('已输入');
            location.herf = "search-result.html?keyword=" + val;
            console.log(location.herf);
            
        }  else {
                //用户没有输入关键字
                console.log('未输入');
                
                alert('请输入关键字');
        }
    });
      //实现历史关键字的存储
          //1.准备一个存储关键字的数组
          //2.当用户点击搜索按钮的时候 将用户输入的关键字追加到数组中
          //3.将数组存储在本地的存储中
          //4.在页面一上来的时候  判断本地存储中是否已经存储 关键字
          //5.将数据和HTML拼接 将数据展示在页面中
var keyArr = [];
    if (localStorage.getItem('val')) {
        keyArr = JSON.parse(localStorage.getItem('val'));
        var html = template("historyTpl", { result: keyArr })
        $('#history-box').html(html);
       }
        
    /*
     实现清空历史

         1.给元素添加点击事件
         2.清空页面中的数据 清空本地存储中的数据
 */
    $('#clearBtn').on('click', function () {
        $('#history-box').html("");
        localStorage.removeItem("keyArr");

    });
})